<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<title></title>
		<script src="js/mui.min.js"></script>
		<link rel="stylesheet" type="text/css" href="css/registLogin/util.css">
		<link rel="stylesheet" type="text/css" href="css/registLogin/main.css">
		<script type="text/javascript" charset="utf-8">
			mui.init();
		</script>
		<style>
			.p-t-85 {
				padding-top: 10px;
			}
			
			.p-b-70 {
				padding-bottom: 35px;
			}
			
			.m-t-85 {
				margin-top: 15px;
			}
			
			.container-login100 {
				padding: 25px;
			}
			/*toast信息提示*/
			
			.mui-toast-container {
				bottom: 50% !important;
			}
			
			.mui-toast-message {
				opacity: 0.6;
				color: #fff;
				width: 180px;
				padding: 70px 5px 10px 5px;
			}
		</style>
	</head>

	<body <div class="mui-content">
		<div class="container-login100">
			<div class="wrap-login100 p-t-85 p-b-20">
				<form id="userform">
					<span class="login100-form-title p-b-70">
							<h5>登录</h5>
					</span>
					<span class="login100-form-avatar">
							<img id="img_login_face" src="css/registLogin/arrow.jpg" >
					</span>
					<div class="wrap-input100 validate-input m-t-85 m-b-35">
						<input class="input100" type="text" id="username" name="username" placeholder="用户名">
						<span class="focus-input100"></span>
					</div>

					<div class="wrap-input100 validate-input m-b-50">
						<input class="input100" type="password" id="txt_password" name="password" placeholder="密码">
						<span class="focus-input100"></span>
					</div>
					<div class="container-login100-form-btn">
						<button type="submit" id="login" class="login100-form-btn">	登录</button>
					</div>
					<br/>
					<div class="container-login100-form-btn" style="">
						<button type="button" id="open_register" class="login100-form-btn" 
							style="background-color: #989898; ">没有账号，先注册</button>
					</div>
				</form>
			</div>
		</div>
		</div>
		<script type="text/javascript" src="js/app.js"></script>
		<script type="text/javascript">
			mui.plusReady(function() {
				//页面跳转注册页面
				var open_register = document.getElementById("open_register");
				open_register.addEventListener("tap", function() {
					mui.openWindow("register.html", "register.html");
				});

				// 判断用户是否注册登录过，如果本地内存有全局的用户对象，此时直接跳转到首页
				var userInfo = app.getUserGlobalInfo();
				if(userInfo != null) {
					// 页面跳转
					mui.openWindow("index.html", "index.html");
				}

				var userform = document.getElementById("userform");
				var username = document.getElementById("username");
				var txt_password = document.getElementById("txt_password");

				//登录方法
				userform.addEventListener("submit", function(e) {
					// 判断用户名是否为空，如果为空则让其获得焦点
					if(!app.isNotNull(username.value)) {
						// 获取焦点
						username.focus();
					} else if(!app.isNotNull(txt_password.value)) {
						// 获取焦点
						txt_password.focus();
					} else {
						// 判断用户名和密码的长度，进行限制
						if(username.value.length > 12) {
							app.showToast("用户名不能超过12", "error");
							return false;
						} else if(txt_password.value.length > 12) {
							app.showToast("密码不能超过12", "error");
							return false;
						}
						// 获取每台手机的唯一cid
						var cid = plus.push.getClientInfo().clientid;
						if(app.isNotLogin(username.value, txt_password.value)) {
							app.setNotLoginUserGlobalInfo();
							app.showToast("登录成功", "success");
							// 页面跳转
							mui.openWindow("index.html", "index.html");
						} else {
							// 与后端联调
							mui.ajax(app.serverUrl + "/u/login", {
								data: {
									userName: username.value,
									passWord: txt_password.value,
									cid: cid
								},
								dataType: 'json', //服务器返回json格式数据
								type: 'post', //HTTP请求类型
								timeout: 10000, //超时时间设置为10秒；
								headers: {
									'Content-Type': 'application/json'
								},
								success: function(data) {
									//服务器返回响应，根据响应结果，分析是否登录成功；
									username.blur();
									txt_password.blur();
									if(data.status == 200) {
										// 登录或者注册成功之后，保存全局用户对象到本地缓存
										var userInfoJson = data.data;
										app.setUserGlobalInfo(userInfoJson);
										app.showToast("登录成功", "success");
										// 页面跳转
										mui.openWindow("index.html", "index.html");
									} else {
										app.showToast(data.msg, "error");
									}
								}
							});
						}
					}
					// 阻止默认时间，阻止默认表单提交
					e.preventDefault();
				});
			})
		</script>
	</body>

</html>